<script src="/official_mahjong/s/js/official_mahjong.js"></script> 

<script>
var sessionNumber = {{ sessionNumber }};
var handNumber = {{ handNumber }};
var gameKeyStr = "{{ gameKey }}";
var modifying = {% if modifying %}true{% else %}false{% endif %};
var directionName = ['East', 'South', 'West', 'North'];

var falseMahjongFans = [0, 0, 0, 0];
var calculatedFans = [0, 0, 0, 0];

var currentFanArr = null;
var generalErrorText = {
                        "playersNotSame" : "Players can only be rearranged, not changed.", 
                        "invalidSessionOrHand" : "Previous hands or sessions are not recorded.", 
                        "rolledBack" : "The game is being played elsewhere and got conflicted."
                        };
</script>

Session: {{ sessionNumber|add:"1" }}<br />
Round Wind: <span id="roundWind">{{ roundWind }}</span><br />
Seat Wind: <span id="seatWind">{{ seatWind }}</span><br />

<form name="playcontrol" action="">

<div id="east_pannel" style="top: 20px; left: 200px; width: 180px; height: 100px; position:absolute;">
EAST:<br>{{ form.player0Name }} {{ form.player0Fan }}
<li id="player0Err" class="form_err_msg" style="visibility:hidden;">Input invalid</li>
</div>
<div id="south_pannel" style="top: 120px; left: 20px; width: 180px; height: 100px; position:absolute;">
SOUTH:<br>{{ form.player1Name }} {{ form.player1Fan }}
<li id="player1Err" class="form_err_msg" style="visibility:hidden;">Input invalid</li>
</div>
<div id="west_pannel" style="top: 220px; left: 200px; width: 180px; height: 100px; position:absolute;">
WEST:<br>{{ form.player2Name }} {{ form.player2Fan }}
<li id="player2Err" class="form_err_msg" style="visibility:hidden;">Input invalid</li>
</div>
<div id="north_pannel" style="top: 120px; left: 380px; width: 180px; height: 100px; position:absolute;">
NORTH:<br>{{ form.player3Name }} {{ form.player3Fan }}
<li id="player3Err" class="form_err_msg" style="visibility:hidden;">Input invalid</li>
</div>

<ul><li style="height:320px; "></li></ul>

<div style="top: 320px; left: 260px; width:480px; position:absolute;" >
<input type="submit" id="playControlSubmit" name="submit" value="OK"><br />
<li id="generalErr" class="form_err_msg" style="visibility:hidden;">&nbsp;</li>
</div>

</form>

<div id="fanInputer" style="top: 20px; left: 560px; width:260px; position:absolute;">
    Input Fans : <br />
    <br />
    
    <table>
    
    <tr>
    <td><label for="winnerPlayer">Winner:</label></td>
    <td><select name="winnerPlayer" id="winnerPlayer"></select></td>
    </tr>
    
    <tr>
    <td><label for="byPlayer">By:</label></td>
    <td>
        <select name="byPlayer" id="byPlayer"><option value="-1">Self Drawn</option></select>
    </td>
    </tr>
    
    <tr>
    <td><label for="winnerFan">Fans:</label></td>
    <td>
        <input type="text" name="winnerFan" id="winnerFan" value=8 size=3>
        <span id="winnerFanErr" class="form_err_msg" style="visibility:hidden;">Input invalid</span>
    </td>
    </tr>
    
    </table>
    <input type="button" id="calculateButton" name="calculateButton" value="Calculate"><br />
    <br />
    
    False Mahjong : <br />
    <br />
    
    <select name="falseMahjongPlayer" id="falseMahjongPlayer"></select><br />
    <input type="button" id="falseMahjongValidButton" name="falseMahjongValidButton" value="Hand Valid">
    <input type="button" id="falseMahjongInvalidButton" name="falseMahjongInvalidButton" value="Hand Invalid">
    <br />
    <br />
    
    <input type="button" id="drawGameButton" name="drawGameButton" value="Draw Game"><br />

</div>
